//====================================
// HELPERS
//====================================
// Helpers are non-semantic, global utilities.
// Helpers should not include theme specifics: color, images, etc.
// Helpers are created as SASS Mixins so they can be "mixed-in" to other SASS declarations and not be forced into the markup.
// SASS Mixins:
// http://sass-lang.com/
// Many Helpers inspired by HTML5 Boilerplate:
// http://html5boilerplate.com/

// For image replacement
@mixin ir() {
	display				: block;
	text-indent			: -999em;
	overflow			: hidden;
	background-repeat	: no-repeat;
	text-align			: left;
	direction			: ltr;
}

// Hide for both screenreaders and browsers:
// css-discuss.incutio.com/wiki/Screenreader_Visibility
@mixin hidden() {
	display		: none; 
	visibility	: hidden;
}

// Hide only visually, but have it available for screenreaders: by Jon Neal.
// www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden
@mixin visuallyhidden($focusable: false) { 
	border		: 0;
	clip		: rect(0 0 0 0);
	height		: 1px;
	margin		: -1px;
	overflow	: hidden;
	padding		: 0;
	position	: absolute;
	width		: 1px;
	@if $focusable == true {@include focusable(true);}
}
// Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638
@mixin focusable() {
	&:focus,
	&:active {
		clip	: auto;
		height	: auto;
		margin	: 0;
		overflow: visible;
		position: static;
		width	: auto;
	}
}

// Hide visually and from screenreaders, but maintain layout
@mixin invisible() {
	visibility	: hidden;
}

// The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
//   j.mp/bestclearfix
// Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page
@mixin clearfix() {
	&:before,
	&:after {
		content	: "\0020";
		display	: block;
		height	: 0;
		overflow: hidden; 
	}
	&:after {
		clear	: both;
	}
	zoom		: 1;
}

// Easy 2-color, linear gradient stack. Pass in the colors.
@mixin gradient($color1, $color2) {
	background-image	: -moz-linear-gradient(top, $color1, $color2);
	background-image	: -webkit-gradient(linear, left top, left bottom, color-stop(0, $color1), color-stop(1, $color2));
	-ms-filter			: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$color1}', EndColorStr='#{$color2}')";
	background-image	: linear-gradient(top, $color1, $color2);
}

// 3-color, hard-edge gradient stack. Pass in the colors.
@mixin gradient2($color1, $color2, $color3) {
	background-image	: -moz-linear-gradient(top, $color1, $color2, $color2 50%, $color3 0%);
    background-image	: -webkit-gradient(linear, left top, left bottom, from($color1), to($color2), color-stop(.5,$color2) ,color-stop(.5,$color3));
    -ms-filter			: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$color1}', EndColorStr='#{$color3}')";
    background-image	: linear-gradient(top, $color1, $color2, $color2 50%, $color3 0%);
}

// Easy way to add rounded corners. Pass in the desired size of the corner radius.
@mixin rounded($size) {
	-moz-border-radius		: $size;
	-webkit-border-radius	: $size;
	border-radius			: $size;
}

// More flexible way to add rounded corners only to specific sides.
@mixin round($topleft, $topright, $bottomright, $bottomleft) {
	-moz-border-radius					: $topleft $topright $bottomright $bottomleft;
	-webkit-border-top-left-radius		: $topleft;
	-webkit-border-top-right-radius		: $topright;
	-webkit-border-bottom-right-radius	: $bottomright;
	-webkit-border-bottom-left-radius	: $bottomleft;
	border-radius						: $topleft $topright $bottomright $bottomleft;
}

// Easy way to add a box-shadow stack. Pass in any of the desired values.
@mixin box-shadow($shadow: 2px 2px 2px $black) {
	-moz-box-shadow		: $shadow;
	-webkit-box-shadow	: $shadow;
	box-shadow			: $shadow;
}

// Easy way to add a basic text-shadow. Will default to a bottom shadow. 
// Pass in "light" to get a top bevel on dark text/backgrounds.
@mixin text-shadow($type: dark) {
	@if($type == 'light') {
		text-shadow	: 0 1px 1px rgba($white,.8);	
	} @else {
		text-shadow	: 0 -1px 1px rgba($black,.7);	
	}
	
}

// Creates a quick colored box.
@mixin color-box($color) {
	background	: transparentize($color, 0.75);
	border-color: $color;
	color		: darken($color, 10%);
}

// Widgets are stripped of chrome.
@mixin widget-no-chrome() {
	.fl-widget {
		margin: 0;
		padding: 0;
		background: none;
		border: none;
		
		.fl-widget-titlebar {
			display: none;
		}
		
		.fl-widget-content {
			margin: 0;
			padding: 0;
			background: transparent;
		}
	}
}

// Opacity (pass in whole number as percentage)
@mixin opacity($percentage) {
  -moz-opacity: $percentage/100;
  opacity: $percentage/100;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=#{$percentage});
  filter:alpha(opacity=#{$percentage});
}